<template>
    <el-dialog
            v-model="isVisible"
            width="80%"
            :title="title"
            :destroy-on-close="true"
            :close-on-click-modal="false"
    >
        <el-button class="mb-4px" icon="plus" type="success" @click="formPage.open('create',searchData)">新增</el-button>
        <el-table :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" id="databaseTable" :data="pageData.records"
                  border max-height="500">
            <el-table-column prop="sort" label="排序"/>
            <el-table-column prop="value" label="字典码值"/>
            <el-table-column prop="label" label="显示标签"/>
            <el-table-column prop="invalid" label="是否禁用">
                <template #default="item">
                    <el-switch
                            @change="service
                            .saveOrUpdate(item.row)
                            .success(result => {
                                MsgUtils.successMsg('字典状态保存成功');
                                dictUtils.cacheDict();//刷新数据字典
                            })
                            .request()"
                            v-model="item.row.disabled"
                            active-color="#C8D5E3"
                            inactive-color="#13ce66"
                            active-text="禁用"
                            inactive-text="启用"
                    />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="item">
                    <el-button type="primary" link size="small"
                               @click="service
                               .deleteById(item.row.id)
                               .confirm('是否删除字典项?')
                               .success(result => {MsgUtils.successMsg('删除成功');
                                   dictUtils.cacheDict();//刷新数据字典
                                   getPage();})
                               .request()">删除
                    </el-button>
                    <el-button type="primary" link size="small"  @click="formPage.open('edit',item.row)">编辑</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                background
                small
                v-model:currentPage="pageData.current"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageData.size"
                layout="total, sizes, prev, pager, next"
                :total="pageData.total"
                @size-change="(size)=>{pageData.size = size;getPage()}"
                @current-change="(current)=>{pageData.current = current;getPage()}"
        >
        </el-pagination>
    </el-dialog>
    <DictItemForm
            :saveSuccess="()=>{formPage.close();
                MsgUtils.successMsg('保存成功');
                dictUtils.cacheDict();//刷新数据字典
                getPage()}"
            :saveError="()=>{MsgUtils.errorMsg('保存失败')}"
            ref="formPage"></DictItemForm>
</template>
<script lang="ts" setup>
    import {defineExpose, onMounted, ref, watch} from 'vue'
    import service, {DictItem} from "@/api/sys/SysDictItemApi";
    import {Page} from "@/api/BaseApi";
    import MsgUtils from "@/common/utils/MsgUtils";
    import DictItemForm from './DictItemForm.vue'
    import {Dict} from "@/api/sys/SysDictApi";
    import dictUtils from "../../../common/DictUtils";

    let title = ref<string>('')
    //表单组件
    const formPage = ref(null);
    //查询条件
    let searchData = ref<DictItem>({})
    //列表分页数据
    let pageData = ref<Page<DictItem>>({size: 20, current: 1,total:0, orders: [{column: 'sort'}]});
    //获取列表信息
    const getPage = () => {
        service
            .getPage(pageData.value, searchData.value)
            .success(result => pageData.value = result.data)
            .request();

    }
    let isVisible = ref<boolean>(false)
    const open = (data?: Dict) => {
        isVisible.value = true;
        title.value = data.code + ' - ' + data.name;
        searchData.value = {code: data.code};
        getPage();
    }
    defineExpose({open})
</script>
<style lang="scss" scoped>
</style>

